<template>
	<view class="content">
		<view class="list">
			<view class="child flexbetween">
				<view class="name white_nowrap">服务类别</view>
				<view class="flexleft" @click="service_typeShow = true">
					<input class="margin_right1" type="text" placeholder="请选择服务类别" disabled v-model="service_typeName">
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">服务标签</view>
				<view class="flexleft" @click="selectTagfn()">
					<input class="margin_right1" type="text" placeholder="请选择服务标签" disabled v-model="service_tagsName">
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">服务价格</view>
				<view class="flexleft" @click="goAddServicePrice">
					<input class="margin_right1" type="text" :placeholder="service_sku.length?'已设置':'去设置服务规格'" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<!-- 当导航栏为天聊是才显示职业和擅长领域 -->
			<view class="child flexbetween" v-if="service_type==4">
				<view class="name white_nowrap">职业</view>
				<view class="flexleft" @click="occupationShow=true">
					<input class="margin_right1" type="text" placeholder="请选择您的职业" disabled v-model="occupationName">
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" v-if="service_type==4">
				<view class="">
					<view class="color_ling text_x titletext">擅长领域</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder"
							placeholder="请输入擅长领域" style="height: 140rpx;font-size: 30rpx;"
							v-model="good_at_field"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="color_ling text_x titletext">个人简介</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder"
							placeholder="请输入个人简介" style="height: 140rpx;font-size: 30rpx;"
							v-model="description"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff">
				<view class="titletext">服务图</view>
				<view class="ffffff radius">
					<view class="flexleft flex_wrap">
						<view class="item_image_box margin_top" v-for="(item,index) in images_arr" :key="index">
							<view class="item_image radius">
								<image :src="item" mode=""></image>
								<view class="deletimg" @click="deleimage(index)"></view>
							</view>
						</view>
						<!-- 图片盒子 -->
						<view class="item_image_box margin_top" @click="uploadImg(3)" v-if="images_arr.length<3">
							<view class="item_image radius">
								<image src="/static/image/home/noimage.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<!-- <view style="padding:30rpx  30rpx 60rpx;">
			<view class="footer_btn" @click="submit">保存</view>
		</view> -->
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="submit">保存</view>
		</view>
		<u-picker :show="service_typeShow" title="选择服务类别" :columns="service_typeList" keyName="name"
			@confirm="service_typeConfirm" @cancel="service_typeShow=false"></u-picker>
		<u-picker :show="service_tagsShow" title="选择服务标签" :columns="service_tagsList" keyName="name"
			@confirm="service_tagsConfirm" @cancel="service_tagsShow=false"></u-picker>
		<u-picker :show="occupationShow" title="选择职业" :columns="occupation_arr" keyName="name"
			@confirm="occupationConfirm" @cancel="occupationShow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				upImg: [],
				images: [], //资料图片
				images_arr: [],
				listid: "",
				service_type: "",
				service_typeShow: false,
				service_typeName: "",
				service_typeList: [
					[{
							id: 1,
							name: "天问"
						},
						{
							id: 2,
							name: "天心"
						},
						{
							id: 3,
							name: "天养"
						},
						{
							id: 4,
							name: "天聊"
						},
						{
							id: 5,
							name: "天鉴"
						},
						{
							id: 6,
							name: "天融"
						},
					]
				],
				service_tags: [], //所有标签
				service_tags_id: "",
				service_tagsName: "",
				service_tagsShow: false,
				service_tagsList: [],
				occupationShow: false,
				occupationName: "",
				occupation_arr: [], //职业
				good_at_field: "",
				description: "",
				service_sku: [],
				isLoad: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.listid = options.id
				uni.setNavigationBarTitle({
					title: "编辑服务"
				});
			}
			this.init()
			let isvivo = this.getisvivo()
			if (isvivo){
				this.service_typeList = [
					[
						{
							id: 2,
							name: "天心"
						},
						{
							id: 3,
							name: "天养"
						},
						{
							id: 4,
							name: "天聊"
						},
						{
							id: 5,
							name: "天鉴"
						},
						{
							id: 6,
							name: "天融"
						},
					]
				]
			}
		},
		onShow() {
			uni.$off("serviceGG")
			uni.$on("serviceGG", data => {
				this.service_sku = data
			})
		},
		watch: {
			service_type(newval) {
				if (this.isLoad) {
					let index = Number(newval) - 1
					this.service_tagsList.push(this.service_tags[index])
					this.isLoad = false
				} else {
					this.service_tagsList = []
					this.service_tags_id = ""
					this.service_tagsName = ""
					let index = Number(newval) - 1
					this.service_tagsList.push(this.service_tags[index])
				}

			},
		},
		methods: {
			getisvivo() {
				const systemInfo = uni.getSystemInfoSync();
				const brand = systemInfo.brand.toLowerCase(); // 转为小写方便判断
				return brand.includes('vivo');
			},
			submit() {
				if (this.service_type == "") {
					httpRequest.toast("请选择服务类别")
					return false
				}
				if (this.service_tags_id == "") {
					httpRequest.toast("请选择服务标签")
					return false
				}
				if (this.service_sku.length == 0) {
					httpRequest.toast("请设置服务规格")
					return false
				}
				if (this.service_type == 4 && this.occupationName == "") {
					httpRequest.toast("请选择职业")
					return false
				}
				if (this.service_type == 4 && this.good_at_field == "") {
					httpRequest.toast("请输入擅长领域")
					return false
				}
				if (this.description == "") {
					httpRequest.toast("请输入个人简介")
					return false
				}
				if (this.images.length == 0) {
					httpRequest.toast("请上传服务图片")
					return false
				}
				let data = {
					id: this.listid,
					service_type: this.service_type,
					service_tags_id: this.service_tags_id,
					images: this.images.join(","),
					occupation: this.occupation,
					good_at_field: this.good_at_field,
					description: this.description,
					service_sku: this.service_sku,
				}
				if (!this.listid) {
					delete data.id
				}
				httpRequest.request('/api/shop.service/save', 'POST', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
				})
			},
			init() {
				let data = {
					id: this.listid
				}
				if (!this.listid) {
					delete data.id
				}
				httpRequest.request('/api/shop.service/getform', 'GET', data).then(res => {
					let arr = []
					for (let key in res.data.service_tags) {
						arr.push(res.data.service_tags[key])
					}
					this.service_tags = arr
					let arr1 = res.data.occupation_arr
					let occupation_arr = []
					for (let key in arr1) {
						occupation_arr.push({
							id: key,
							name: arr1[key]
						})
					}
					this.occupation_arr.push(occupation_arr)
					if (this.listid) {
						this.isLoad = true
						let data = res.data.info
						this.occupation = data.occupation
						this.occupationName = data.occupation
						this.service_sku = data.service_sku
						this.description = data.description
						this.good_at_field = data.good_at_field
						this.service_tags_id = data.service_tags_id
						this.service_tagsName = data.service_tags_id_text
						this.service_type = data.service_type
						let index = Number(data.service_type) - 1
						this.service_typeName = this.service_typeList[0][index].name
						this.images = data.images.split(',')
						this.images_arr = data.images_arr
					}
				})
			},
			service_typeConfirm(e) { //选择服务类别
				this.service_type = e.value[0].id
				console.log(e);
				this.service_typeName = e.value[0].name
				if (this.service_type == 4) {

				}
				this.service_typeShow = false
			},
			selectTagfn() {
				if (this.service_type == "") {
					httpRequest.toast("请先选择服务类别！")
					return false
				}
				this.service_tagsShow = true
			},
			service_tagsConfirm(e) { //选择服务标签
				this.service_tags_id = e.value[0].id
				this.service_tagsName = e.value[0].name
				this.service_tagsShow = false
			},
			occupationConfirm(e) { //选择职业
				// this.occupation = e.value[0].id
				this.occupation = e.value[0].name
				this.occupationName = e.value[0].name
				this.occupationShow = false
			},
			// goInvoice() {
			// 	uni.navigateTo({
			// 		url: "/pages_mine/invoiceAide"
			// 	})
			// },
			goAddServicePrice() { //添加服务价格
				uni.navigateTo({
					url: "/pages_service/addServicePrice?service_sku=" + encodeURIComponent(JSON.stringify(this
						.service_sku))
				})
			},
			getuserInfo() { //获取个人信息
				let _this = this;
				httpRequest.request('/api/user/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						_this.nickname = res.data.nickname; //昵称
						_this.avatar = res.data.avatar_text; //头像
					}
				})
			},
			uploadImg(length) {
				let that = this
				var martial_images = that.images
				var martial_images_arr = that.images_arr
				if (martial_images.length >= length) {
					httpRequest.toast('最多上传' + length + '张图片');
					return;
				}
				upFile.chooseImage({
					count: length - martial_images.length
				}, function(res) {
					console.log(res);
					martial_images_arr.push(res.fullurl)
					martial_images.push(res.url)
					console.log(martial_images_arr, martial_images);
					that.images_arr = martial_images_arr
					that.images = martial_images
				})
			},
			deleimage(index, value) {
				var that = this;
				that.images_arr.splice(index, 1)
				that.images.splice(index, 1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 150rpx;
	}
	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	::v-deep.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);

	}

	.pops {
		padding: 0 60rpx 60rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #000000;
			padding: 40rpx 0;
		}

		.lists {
			.sex {
				text-align: center;
				margin: 20rpx 0;
				color: #999999;
			}

			.sexs {
				color: #FF7510;
				text-align: center;
				margin: 20rpx 0;
			}
		}

		.submits {
			// background-image: linear-gradient(to right, #42CD5A, #55C900);
			background-color: #FF7510;
			border-radius: 40rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 30rpx 0rpx 0rpx 0rpx;
		}
	}

	.titletext {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.list {
		//margin: 30rpx 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
		// border-radius: 20rpx;
		background-color: #FAFAFA;
		// background-color: red;

		.child {
			padding: 30rpx;
			background-color: #ffffff;
			margin-bottom: 30rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.data {
				.gerenxxyjt {
					width: 10rpx;
					height: 18rpx;
					margin-left: 10rpx;
					background-size: 100% 100%;
					// background-image: url('/static/image/my/phone.png');
				}

				.xingbie {
					color: #333333;
					font-size: 28rpx;
				}
			}

			input {
				text-align: right;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}


	.btn {
		position: fixed;
		bottom: 50rpx;
		width: 90vw;
		color: #fff;
		background-color: #d48b39;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 44rpx;
		z-index: 100;
		margin: 30rpx 20rpx;
	}

	input {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>